<template>
	<view>
		<page-head :title="'优惠券'" :headtype="2"></page-head>
		<view class="discountnav flex marginAuto">
			<view class="discouneach" @click="navtagfun(1)" :class="navtag == 1 ? 'activedis':''">优惠券<text v-if="navtag == 1">（{{ Number(disdata.length + enddisdata.length) }}）</text></view>
			<view class="discouneach" @click="navtagfun(2)" :class="navtag == 2 ? 'activedis':''" style="margin-left:50rpx;">运费券<text v-if="navtag == 2">（{{ Number(disdata.length + enddisdata.length) }}）</text></view>
		</view>
		<view class="discount">
			<view class="discounteach marginAuto blockbg" v-for="(item,index) in disdata" :key="index">
				<div class="disintedh" v-if="item.type == 4">积分兑换</div>
				<view class="diseachl">
					<view class="diseachly" style="top:-35rpx;"></view>
					<view class="diseachly" style="bottom:-35rpx;"></view>
					<view class="diseachl-moeny" style="color:#666666;" v-if="item.coupon_type == 0">
						<text style="font-size:24rpx;">￥</text>
						<text style="font-size:50rpx;">{{ item.amount }}</text>
					</view>
					<view class="diseachl-moeny" style="color:#666666;" v-if="item.coupon_type == 1">
						<text style="font-size:50rpx;">{{ item.amount }}折</text>
					</view>
					<view class="diseachl-moeny" style="color:#666666;" v-if="item.coupon_type == 2">
						<text style="font-size:50rpx;">免单</text>
					</view>
					<view class="diseachl-dec" v-if="item.coupon_type == 0 && item.less_amount != 0">
						满{{ item.less_amount || 0 }}可用
					</view>
					<view class="diseachl-dec" v-if="item.coupon_type == 0 && item.less_amount == 0">无门槛</view>
					<view class="diseachl-dec" v-if="item.coupon_type == 1">打折券</view>
					<view class="diseachl-dec" v-if="item.coupon_type == 2">免单</view>
				</view>
				<view class="diseachc">
					<view class="diseachc-name">{{ item.coupon_name }}</view>
					<view class="diseachc-time" style="margin-top:16rpx;">有效期至：{{ item.use_end_time }}</view>
					<!-- <view class="diseachc-time" style="color:#333333;"></view> -->
				</view>
				<view class="diseachr" style="margin-top: 24rpx;">
					<u-button @click="usefun(item)"
						shape="circle" color="#9E190F" text="去使用"
					 :customStyle="{
						height:'52rpx',
						lineHeight:'52rpx',
						fontSize:'30rpx',
						color:'#fff'
					 }"></u-button>
				</view>
			</view>
		</view>
		<view class="discountnav flex marginAuto">
			<view class="discouneach">已过期（{{ enddisdata.length }}）</view>
		</view>
		<view class="discount">
			<view class="discounteach marginAuto blockbg" v-for="(item,index) in enddisdata" :key="index" style="background-color:#DFDFDF;">
				<view class="diseachl">
					<view class="diseachly" style="top:-35rpx;"></view>
					<view class="diseachly" style="bottom:-35rpx;"></view>
					<view class="diseachl-moeny" style="color:#666666;" v-if="item.coupon_type == 0">
						<text style="font-size:24rpx;">￥</text>
						<text style="font-size:50rpx;">{{ item.amount }}</text>
					</view>
					<view class="diseachl-moeny" style="color:#666666;" v-if="item.coupon_type == 1">
						<text style="font-size:50rpx;">{{ item.amount }}折</text>
					</view>
					<view class="diseachl-moeny" style="color:#666666;" v-if="item.coupon_type == 2">
						<text style="font-size:50rpx;">免单</text>
					</view>
					<view class="diseachl-dec" v-if="item.coupon_type == 0 && item.less_amount != 0">
						满{{ item.less_amount || 0 }}可用
					</view>
					<view class="diseachl-dec" v-if="item.coupon_type == 0 && item.less_amount == 0">无门槛</view>
					<view class="diseachl-dec" v-if="item.coupon_type == 1">打折券</view>
					<view class="diseachl-dec" v-if="item.coupon_type == 2">免单</view>
				</view>
				<view class="diseachc">
					<view class="diseachc-name" style="color:#666666;">{{ item.coupon_name }}</view>
					<view class="diseachc-time" style="margin-top:16rpx;">有效期至：{{ item.use_end_time }}</view>
					<!-- <view class="diseachc-time" style="color:#333333;"></view> -->
				</view>
				<view class="diseachr" style="margin-top: 24rpx;">
					<u-button :customStyle="{
						height:'52rpx',
						lineHeight:'52rpx',
						color:'#fff',
						fontSize:'30rpx',
						border:'none',
					}" color=" #CACACA" shape="circle" text="去使用"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				URLimg:this.URLimg,
				navtag:1,
				disdata:[],
				enddisdata:[]
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData(){
				let sendData = {
					type:0,  // 1=可用,2过期
					class:this.navtag  // 1优惠券2运费券
				};
				this.apifun.unirequest('/api/Coupon/getUserCouponList','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						let daytime = uni.$u.timeFormat(Date.parse(new Date())/1000, 'yyyy-mm-dd');
						datas.forEach((item,index)=>{
							if(daytime <= item.use_end_time){
								this.disdata.push(item)
							}else{
								this.enddisdata.push(item)
							}
						})
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			navtagfun(type){
				if(type == this.navtag) return false;
				this.navtag = type;
				this.disdata=[];
				this.enddisdata=[];
				this.initData()
			},
			usefun(){  // 使用
				uni.switchTab({
					url:"/pages/tabbar/index"
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	page{
		padding-bottom: 100rpx;
	}
	.blockbg {
		width: 640rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 24rpx;
		margin-top: 20rpx;
	}
	.discountnav{
		width: 680rpx;
		height:74rpx;
		.discouneach{
			line-height: 74rpx;
			color:#666666;
			font-size: 30rpx;
		}
		.activedis{
			color:#9E190F;
		}
	}
	.discounteach{
		position: relative;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		.disintedh{
			position:absolute;
			top: 0;
			left: 0;
			padding:0 12rpx;
			font-size:18rpx;
			height: 36rpx;
			line-height: 36rpx;
			color: #fff;
			background-color: #D31E11;
			border-bottom-right-radius: 20rpx;
		}
		.diseachl{
			position: relative;
			border-right: 1px dashed #E2E2E2;
			padding-right:20rpx;
			.diseachly{
				position: absolute;
				right:-14rpx;
				width:26rpx;
				height: 26rpx;
				border-radius: 50%;
				background-color:#F4F5F6;
			}
			.diseachl-moeny{
				color: #333;
			}
			.diseachl-dec{
				font-size: 24rpx;
				color:#9E9E9E;
			}
			
		}
		.diseachc{
			width:51%;
			.diseachc-name{
				font-size: 32rpx;
				color:#333;
				line-height:44rpx;
				margin-top: 10rpx;
			}
			.diseachc-time{
				color: #999999;
				font-size: 20rpx;
				line-height:30rpx;
			}
		}
		.diseachr{
			width: 140rpx;
			height: 52rpx;
			line-height:52rpx;
			.diseachrinter{
				font-size: 24rpx;
				color:#FF4E43;
				text-align: center;
			}
		}
		.dqimg{
			position: absolute;
			left:-0rpx;
			bottom: -40rpx;
			width:200rpx;
			height: 156rpx;
		}
	}
</style>